<!--角色选择框-->
<template>
  <div class="records-wrap" @click.stop>
    <div class="records-header">{{ pageTitle }} <a-button @click="backClick">返回</a-button></div>
    <div class="records-main">
      <div class="left-tree">
        <a-tree defaultExpandAll show-icon :tree-data="treeData" @select="treeSelect">
          <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>
          <template #icon="{ key }">
            <template v-if="key === '0-0' || key === '1-0'">
              <credit-card-outlined style="margin-top: 4px" />
            </template>
            <template v-else>
              <calendar-outlined style="margin-top: 4px" />
            </template>
          </template>
        </a-tree>
      </div>
      <div style="flex: 1; height: 100%">
        <RecordDetail v-if="pageTitle === '资产流转记录'" :asset-id="assetId" />
        <div v-else>
          <template v-for="i in treeChildren" :key="i.title">
            <div :id="i.key"> {{ i.title }}</div>
            <div style="background-color: skyblue; height: 300px"></div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import type { TreeProps } from 'ant-design-vue';
  import { DownOutlined, CreditCardOutlined, CalendarOutlined } from '@ant-design/icons-vue';
  import RecordDetail from './RecordDetail.vue';
  // import { renderUseState } from '@/views/asset/asset-info/AssetInfo.data';
  import { ref, nextTick } from 'vue';
  defineProps({
    assetId: {
      type: String,
      required: true,
    },
  });
  const emits = defineEmits(['back']);
  const backClick = () => {
    console.log('back');
    emits('back');
  };
  const treeChildren = [
    {
      title: '基础信息',
      key: '2',
    },
    {
      title: '资产信息',
      key: '3',
    },
    {
      title: '资产报废信息',
      key: '4',
    },
    {
      title: '出入库信息',
      key: '5',
    },
    {
      title: '调拨信息',
      key: '6',
    },
  ];
  const treeData: TreeProps['treeData'] = [
    {
      title: '资产全视图详情',
      key: '1',
      children: treeChildren,
    },
    {
      title: '资产流转记录',
      key: '100',
    },
  ];
  const pageTitle = ref('资产全视图详情');
  const treeSelect = ([key]) => {
    if (key !== '100') {
      pageTitle.value = '资产全视图详情';
      nextTick(() => {
        scrollToSection(key);
      });
    } else {
      pageTitle.value = '资产流转记录';
    }
    console.log(key, 'treeSelect');
  };
  function scrollToSection(id) {
    // 使用你的滚动逻辑来定位到指定位置
    // 例如，使用 Vue 的 $refs 或者原生 JavaScript 来滚动到目标元素
    // currentId.value = id;
    const section = document.getElementById(id);
    if (section) {
      section.scrollIntoView({ behavior: 'smooth' });
    }
  }
</script>
<style scoped lang="less">
  .records-wrap {
    padding: 10px;
    height: calc(100vh - 98px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .records-header {
      margin-bottom: 10px;
      background-color: #fff;
      padding: 10px 12px;
      font-size: 16px;
      font-weight: bold;
    }
    .records-main {
      flex: 1;
      overflow: hidden;
      background-color: #fff;
      width: 100%;
      display: flex;
      &:hover {
        overflow: overlay;
      }
      .left-tree {
        width: 280px;
        padding-top: 16px;
        padding-left: 20px;
        border-right: 10px solid #efefef;
      }
    }
  }

  :deep(.ant-tree) {
    font-size: 16px;
  }
  .record-item {
    transition: all 0.3s;
    &.blue {
      color: #1890ff;
      .record-detail {
        border-color: #1890ff;
      }
    }
  }
</style>
